<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <h1 id="h1">日历</h1>
    <button id="left">上个月</button>
    <button id="right">下个月</button>
    <ul id="ul">

    </ul>
    <script>
        // var date = new Date(2019, -1, 32)
        // console.log(date.toLocaleDateString())
            //年   月      日  上月最后一天   上月最后一天星期
        var year, month, date, lastDate, lastDay,currDate;
   //                                            本月最后一天
        function getDate(time) {
            var h1 = document.getElementById("h1")
            h1.innerHTML = "日历" + time.toLocaleDateString()
            console.log(time.toLocaleDateString())
            // 获取当前     年月日
            year = time.getFullYear()
            month = time.getMonth()
            date = time.getDate()
            // console.log(year, month, date)
            // 获取上个月 最后一天几号    星期几？
            // 2019 4 
            // 2019 3  
            lastDate = new Date(year, month, 0).getDate()   //获取上个月最后一天几号
            lastDay = new Date(year, month, 0).getDay()    //获取上个月最后一天星期几

            // 获取本月最后一天

            currDate = new Date(year, month + 1, 0).getDate()  //本月最后一天
            console.log(currDate)
            // console.log(lastDate, lastDay)

            lastDate = lastDate - lastDay + 1


            render()
        }


        function render() {
            var html = ` <li>星期一</li>
                        <li>星期二</li>
                        <li>星期三</li>
                        <li>星期四</li>
                        <li>星期五</li>
                        <li>星期六</li>
                        <li>星期日</li>`
            var ul = document.getElementById("ul")
            var index = 1;
            for (var i = 1; i <= 42; i++) {
                // 上个月
                if (i <= lastDay) {
                    html += `<li class=active2>${lastDate++}</li>`
                } else if (i <= currDate + lastDay) {
                    if (i - lastDay == date) {
                        html += `<li class=active1>${i - lastDay}</li>`
                    } else {
                        html += `<li>${i - lastDay}</li>`

                    }
                } else {
                    html += `<li class=active2>${index++}</li>`
                }


            }
            ul.innerHTML = html;
        }
        getDate(new Date())

        addEvent()

        function addEvent() {
            var left = document.getElementById("left")
            var right = document.getElementById("right")
            left.onclick = function () {
                // alert(123)
                month--
                getDate(new Date(year, month, date))
            }

            right.onclick = function () {
                // alert(123)
                month++
                getDate(new Date(year, month, date))
            }
        }
    </script>
</body>

</html>